<template>
  <el-drawer
      v-model="showFlag"
      append-to-body
      :before-close="cancel">
    <div style="margin: 20px">
      <el-form :model="refForm" :rules="rules" ref="formView" label-position="top" size="default">
        <el-form-item label="上级组织" prop="dictType">
          <el-tree-select style="width: 100%" node-key="deptId" v-model="refForm.parentId" :props="{label: 'deptName',children: 'children'}"
                          :data="deptTreeList" check-strictly/>
        </el-form-item>
        <el-form-item label="组织名称" prop="deptName">
          <el-input v-model="refForm.deptName"/>
        </el-form-item>
        <el-form-item label="排序" prop="orderNum">
          <el-input-number :min="0" v-model="refForm.orderNum"/>
        </el-form-item>
        <el-form-item label="负责人" prop="leader">
          <el-input v-model="refForm.leader"/>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="refForm.phone"/>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="refForm.email"/>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-radio-group v-model="refForm.state">
            <el-radio v-for="item in stateOptions" :label="item.dictValue">{{ item.dictLabel }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div style="text-align: center;margin-bottom: 10px">
        <el-button size="default" @click="cancel()">取消</el-button>
        <el-button size="default" type="primary" @click="subimt()" v-auths="['system-dept-add','system-dept-update']">提交</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import {addDept,updateDept} from '/@/api/system/dept'
import {ElMessage} from "element-plus";

const props = defineProps({
  deptTreeList: {
    type: Array,
    required: true
  }
})
const emits = defineEmits(['ok'])
const {proxy} = getCurrentInstance()
const showFlag = ref(false)
const rules = reactive({
  parentId:[{required: true, message: '请选择上级组织', trigger: 'blur'}],
  deptName:[{required: true, message: '请输入组织名称', trigger: 'blur'}]
})
const refForm = reactive({
  deptId: undefined,
  parentId: undefined,
  deptName: undefined,
  orderNum: 1,
  leader: undefined,
  phone: undefined,
  email: undefined,
  state: '0',
})
const subimt = async () => {
  await proxy.$refs.formView.validate((valid, fields) => {
    if (valid) {
      if (!refForm.deptId) {
        addDept(refForm).then(res => {
          ElMessage.success(res.msg)
          cancel()
          emits('ok')
        })
      } else {
        updateDept(refForm).then(res => {
          ElMessage.success(res.msg)
          cancel()
          emits('ok')
        })
      }
    }
  })


}
const cancel = () => {
  proxy.$refs.formView.clearValidate()
  proxy.$refs.formView.resetFields()
  refForm.deptId = undefined
  refForm.parentId = undefined
  refForm.deptName = undefined
  refForm.orderNum = 1
  refForm.leader = undefined
  refForm.phone = undefined
  refForm.email = undefined
  refForm.state = '0'
  showFlag.value = false
}

const stateOptions = ref([])
onBeforeMount(() => {
  proxy.$dictOptions('sys_common_status').then(res => {
    stateOptions.value = res.data
  })
})

const open = (node) => {
  refForm.parentId = node.deptId
  showFlag.value = true
}

const update =(node)=>{
  refForm.deptId = node.deptId
  refForm.parentId = node.parentId
  refForm.deptName = node.deptName
  refForm.orderNum = node.orderNum
  refForm.leader = node.leader
  refForm.phone = node.phone
  refForm.email = node.email
  refForm.state = node.state
  showFlag.value = true
}

defineExpose({
  open,
  update
})
</script>

<style scoped>

</style>
